import React, {Component} from "react";
import {Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import {NoticeBar} from "@ant-design/react-native";
import {observer} from "mobx-react";
import userStatus from "../../common/userStatus";
import {apiDomain, postData} from "../../common/api";

@observer
export default class AdminMenu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }

    toUrl(name, param) {
        this.props.navigation.navigate(name, param)
    }

    componentWillUnmount = () => {
        this.setState = (state, callback) => {
            return;
        };
    }

    componentDidMount() {

    }

    render() {
        const {navigation} = this.props

        return (
            <ScrollView>
                <Text style={{color: '#333', fontSize: 22, marginBottom: 10,fontWeight: 'bold', marginLeft: 20, marginTop: 20}}>Welcome, {userStatus.userStatus.username}</Text>
                <View style={styles.btnView2}>
                    <TouchableOpacity style={styles.btn2} onPress={() => {
                        navigation.navigate('inventory')
                    }}>
                        <Image source={require('../../img/booking.png')} style={styles.img} />
                        <Text style={{marginLeft: 15, fontSize: 17}}>Inventory analysis</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.btn2} onPress={() => {
                        navigation.navigate('sales')
                    }}>
                        <Image source={require('../../img/booking.png')} style={styles.img} />
                        <Text style={{marginLeft: 15, fontSize: 17}}>Sales & Gross Profit report</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.btn2} onPress={() => {
                        navigation.navigate('accountReceivable')
                    }}>
                        <Image source={require('../../img/booking.png')} style={styles.img} />
                        <Text style={{marginLeft: 15, fontSize: 17}}>Accounts receivable analysis</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
        )
    }
}
const {width, height} = Dimensions.get('window');
const {screenWidth, screenHeight} = Dimensions.get('screen');
const styles = StyleSheet.create({
    container: {
        flexDirection: 'column'
    },
    wrapper: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: 'white',
        paddingBottom: 10,
        paddingTop: 10,
        borderColor: '#ccc',
        borderBottomWidth: 1
    },
    btns: {
        borderTopColor: 'rgb(221, 221, 221)',
        borderTopWidth: 1,
        borderBottomColor: 'rgb(221, 221, 221)',
        borderBottomWidth: 1,
        paddingTop: 20,
        paddingBottom: 20,
        flexDirection: 'row',
        backgroundColor: '#fff',
        justifyContent: 'space-between',
        paddingLeft: 0.1 * width,
        paddingRight: 0.1 * width,
        marginTop: 20
    },
    btn: {
        width: 30,
        height: 30
    },
    btnText: {
        marginTop: 5,
        fontSize: 14,
        textAlign: 'center'
    },
    btnView: {
        alignItems: 'center'
    },

    img: {
        height: 22,
        width: 22,
    },
    btn2: {
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 10,
        paddingBottom: 10,
        borderBottomColor: 'rgb(221, 221, 221)',
        borderBottomWidth: 1,
        flex: 1,
        flexDirection: 'row'
    },
    btnView2: {
        backgroundColor: "#fff",
        borderTopColor: 'rgb(221, 221, 221)',
        borderTopWidth: 1,
        borderBottomColor: 'rgb(221, 221, 221)',
        borderBottomWidth: 1,
        marginTop: 10
    }
});
